본문 바로가기

퍼블리싱/HTML | CSS | Javascript

 (106)
스크롤 끝까지 내렸을때 이벤트 적용하기 아주 간단한 소스 See the Pen Untitled by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css .container{border:1px solid #ddd; height:300px; overflow-y:auto; box-sizing:border-box; padding:20px;} .content{height:500px; background:#777; color:#fff;} js *jquery필요 $(document).ready(function () { $(".container").scroll(function(){ var containerSctop = $(".container").scrollTop(); var containerHeight = $..
버튼 클릭시 input 값이 증감되는 소스 See the Pen plus minus input by publisher.kim (@publisherkim) on CodePen. html - + - + css .count_area{overflow:hidden;} .count_area *{box-sizing:border-box;} .count_area input[type=number]{height:30px; border:1px solid #ddd;float:left; border-left:0; border-right:0; width:30px; text-align:center;} .count_area input[type=number]::-webkit-inner-spin-button {appearance: none;-moz-appearance: none;..
swiper slider with background scale animation 배경화면이 scale 되는 swiper slider See the Pen swiper slide with background and text animation by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css .slider_wrap{width:800px; height:500px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:500px;} .swiper-slide{width:800px; height:5..
랜덤으로 순서가 바뀌는 slider (+with video), 플러그인 x 새로고침 할때마다 랜덤으로 순서가 바뀌는 slider. 현재 작동하는 slide의 video가 끝나면 다음 슬라이드로 넘어가는 방식. pagination 있음, slider plugin 사용 안함! See the Pen random slide with video by publisher.kim (@publisherkim) on CodePen. html 비디오1번_타이틀 비디오1번_텍스트 비디오2번_타이틀 비디오2번_텍스트 비디오3번_타이틀 비디오3번_텍스트 비디오4번_타이틀 비디오4번_텍스트 01. 비디오1_페이지네이션 02. 비디오2_페이지네이션 03. 비디오3_페이지네이션 04. 비디오4_페이지네이션 css /** mainSlide **/ #mainSlide, #mainSlide .videoslide,..
tree menu with checkbox 플러그인을 쓰지 않고 구현하는 tree menu See the Pen tree menu with custom checkbox by publisher.kim (@publisherkim) on CodePen. html 전체 메뉴1 메뉴1_1 메뉴1_1_1 메뉴1_1_1_1 메뉴1_1_1_2 메뉴1_2 메뉴1_2_1 메뉴1_2_1_1 메뉴1_2_1_2 메뉴1_2_2 메뉴1_2_2_1 메뉴1_2_2_2 메뉴2 메뉴2_1 메뉴2_2 메뉴2_3 전국 서울 종로구 강남구 2022년 2021년 css /* treebox */ .treebox{border:1px solid #ddd; padding:20px; margin-left:20px; margin-top: 20px; max-width: 400px; box-sizin..
fullpage.js 기본 소스 https://codepen.io/pohtani/pen/OXMwKb Fullpage.js - Custom Menu ... codepen.io $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], navigation: true, navigationTooltips: ['11', '22', '33','44', '55'], showActiveTooltip: true, scrollingSpeed: 1000 }); }); 위 소스 커스텀해서 사용.
DOM 변경 감지해서 이벤트 발생 jquery와 javascript 함께사용. ajax 등을 통해 페이지 이동 없이 dom이 변경될때, ajax 소스 건드리지 않고 이벤트 추가 적용할때 자주 사용. $(document).ready(function() { var target = $('셀렉터')[0]; // 뒤에 배열도 꼭 써줘야함 var observer = new MutationObserver((mutations) => { console.log("dom 변경됨!") }) var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); }); 아래 스크립트도 작동. const observer = new Mutatio..
head fixed table with custom scrollbar jquery.mCustomScrollbar.js 를 사용해 커스텀 스크롤바를 넣은 head fixed table See the Pen head fixed table with mCustomscrollbar by publisher.kim (@publisherkim) on CodePen. html 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 css /* table */ .tbl_wrap{width:60..
fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과) See the Pen 풀사이즈 header + gnb by publisher.kim (@publisherkim) on CodePen. html 대메뉴1 서브1 서브2 서브3 서브4 대메뉴2 서브1 서브2 서브3 서브4 대메뉴3 서브1 서브2 서브3 서브4 대메뉴4 서브1 서브2 서브3 서브4 css /* header */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); * {font-family: 'pretendard';} body{background: url(https://umings.github.io/images/bg_dark.jpg) no-repeat center / cov..
swiper slider text fadein 효과 See the Pen swiper text fadein by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300..
slick slider progress bar and page fraction example 프로그래스 바 + 페이징 fraction 들어간 slick slider See the Pen slick slider progress bar and page fraction example by publisher.kim (@publisherkim) on CodePen. html 첫번째 슬라이드 두번째 슬라이드 이전 멈춤 다음 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slide_wrap{width:600px; height:300px; margin: 0 auto;} .slide_wrap .item{width:100%; height:300px; box-sizing:bord..
카카오맵 이미지 마커 + 커스텀 오버레이 (마커 클릭시 해당장소로 이동) * 화면확인 https://umings.github.io/images/map_sample.html ------ https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/ 위 링크를 참고해 카카오맵 마커 이미지 변경 + 이미지 클릭시 해당 장소 카카오맵으로 이동하는 소스. 1. 카카오맵 api 발급받기 - 카카오맵에 아주 친절하게 잘 설명되어있음 https://apis.map.kakao.com/web/guide/ 2. 지도에 표출하고자 하는 곳의 위도, 경도 찾기 https://dday.tistory.com/616 카카오맵 위도 경도 찾기 방법 (kakao map) 오늘 포스팅에서는 '카카오맵(kakaomap)을 통해 위도, 경도 찾는 방법'에 대해 알..
background circle animation loading 처음 접속시 중앙에 원형 배경과 로고 나타나기 -> 로딩완료 후 둥근 배경이 확 커지면서 화면을 꽉 채우고 사라지는것 See the Pen background circle animation loading by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css body.hide{overflow: hidden;} .loading{position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%;background: #fff; z-index: 9999; overflow: hidden;} .loading .circle{width: 300px; height: 300px; border-radius: 300p..
swiper slider custom navigation 커스텀 메뉴를 사용한 swiper slider See the Pen swiper custom navigation by publisher.kim (@publisherkim) on CodePen. html 슬라이드 1 슬라이드2 슬라이드3 슬라이드4 이전 다음 슬라이드1 슬라이드2 슬라이드3 슬라이드4 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300px;} ...
text rolling button only css 자동으로 내용이 바뀌는 버튼 (텍스트 말고 이미지로 활용해도 ok) See the Pen text rolling button only css by publisher.kim (@publisherkim) on CodePen. html 버튼내용1 버튼내용2 버튼내용1 버튼내용2 css .rolling_btn{display:inline-block; width:100px; height:100px; border-radius:100%; overflow:hidden; border:2px solid #444; background:#fff; cursor:pointer; transition:all 0.2s;} .rolling_btn:hover{box-shadow:0px 10px 10px rgba(0,0,0,0.1);} .r..
웹접근성 맞춘 gnb //pc 메인메뉴 마우스오버or포커스 $("#header #gnb .m_menu").on('mouseenter focusin', function () { $(this).children("a").addClass("over"); $("#header").stop().animate({ height: 410 }, 200) }); //마우스리브or포커스아웃 $("#header #gnb .m_menu").mouseleave(function () { $("#header #gnb .m_menu a").removeClass("over"); $("#header").stop().animate({ height: 110 }, 200) }) $("#header #gnb .m_menu:last-of-type").focusout(fu..
display:flex; 에서 min-height를 주면 align-itmes:center;가 안될때 해결방법 (ie) 플랙스박스:after{content:''; min-height:inherit; font-size:0;}
input file 커스텀 See the Pen custom input file by publisher.kim (@publisherkim) on CodePen. html 찾아보기 css /* custom file */ .filebox { position: relative; width: 100%; } .filebox .file_input { display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #d9d9d9; width: calc(100% - 80px); color: #333; outline: none !important; box-sizing:border-box;} .filebox .file_input::-webki..
커스텀 selectbox See the Pen custom selectbox by publisher.kim (@publisherkim) on CodePen. html 111 111 222 333 css li{list-style:none;} a{color:#000; text-decoration:none;} div.selectbox { padding: 0; position: relative; text-align: left; width:200px;} div.selectbox .selected { display: block; width: 100%; height: 100%; padding: 0 15px; box-sizing:border-box; background: #fff; border:1px solid #d9d9d9; height:3..
코드작성규칙 1. 태그 순서 type - id - title - class - style 2. a태그 새창 오픈시 target="_blank" 및 title="xxx 페이지 새창으로 열림" 표기 3. a태그로 tab menu등 구현시 클릭후 포커스 이동 않게 반드시 처리 ex) 4. 제목과 열 제목이 있는 경우 이에 대한 scope 속성을 사용 (thead 안에 th의 경우 scope="col" , tbody 안에 th의 경우 scope="row" 적용) 5. 넓이 조정시 w100, w100p 등으로 조정. 6. 네이밍의 조합은 '형태_의미_순서_상태' 또는 '형태_의미&순서_상태'을 기본 순서로 사용 7. 코드 그룹 간 1줄의 빈 줄, 두개 이상의 요소에 하나의 스타일을 지정하는 경우 쉼표(,) 뒤로 줄바꿈. 8...
맨위로
Total : Today :
728x90

티스토리툴바